<template>
    <div class="bread-crumb">
        <div class="previous">
            <a-icon type="double-left" />
        </div>
        <ul class="d-flex flex-1">
            <li class="bread-item first">
                <a-icon type="bank" />
            </li>
            <li
                class="bread-item"
                :class="{'active': isActive(item.path)}"
                v-for="(item, index) in tagsList"
                :key="index"
            >
                <span>
                    <router-link :to="item.path" >
                        {{item.name}}
                    </router-link>
                </span>
                <a-icon type="close" class="close" @click="closeTags(item,index)" />
            </li>
        </ul>
        <div class="next">
            <a-icon type="double-right" />
        </div>
    </div>
</template>
<script>
import { mapState,mapMutations } from "vuex";
// import { EventBus } from "@/bus/bus";
export default {
    data() {
        return {
            currentBread: 1,
            tagsList:[],
        };
    },
    computed: {
    },
    watch:{
        $route(newRoute){
            this.setTags(newRoute)
        }
    },
    methods: {
        isActive(path){
            return path === this.$route.fullPath
        },
        setTags(route){
            const isExit = this.tagsList.some(item=>{
                return item.path === route.fullPath
            })
            if(!isExit){
                if(this.tagsList.length >= 8){
                    this.tagsList.shift();
                }
                this.tagsList.push({
                    name:route.meta,
                    path:route.fullPath
                })
            }
        },
        closeTags(index) {
             const delItem = this.tagsList.splice(index, 1)[0];
             const item = this.tagsList[index]?this.tagsList[index]:this.tagsList[index-1];
             if(item){
                 delItem.path === this.$route.fullPath && this.$router.push(item.path)
             }else{
                 this.$router.push("/manage/index")
             }
        },
    },
    mounted() {},
};
</script>
<style lang="scss" scoped>
.bread-crumb {
    background: #fff;
    line-height: 40px;
    font-size: 14px;
    color: #666;
    box-sizing: border-box;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    .bread-item {
        // min-width: 105px;
        padding: 0 15px;
        cursor: pointer;
        box-sizing: border-box;
        border-right: 1px #f6f6f6 solid;
        position: relative;
        transition: 0.5s;
        &::after {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            background: #292b34;
            top: 0;
            left: 0;
            transition: width 0.5s;
        }
        &:hover {
            background-color: #f6f6f6;
            transition: width 0.5s;
        }
        &:hover::after {
            width: 100%;
        }
    }
    .first {
        width: auto !important;
    }
    .active {
        background-color: #f6f6f6;
        &::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background: #292b34;
            top: 0;
            left: 0;
        }
    }
    .close {
        font-size: 10px;
        color: #c2c2c2;
        padding: 3px;
        border-radius: 50%;
        margin-left: 15px;
        transition: 0.2s;
        &:hover {
            background: #ff5722;
        }
    }
    .previous,
    .next {
        padding: 0 10px;
        transition: 0.5s;
        cursor: pointer;
        &:hover {
            background: #f6f6f6;
        }
    }
}
</style>
